<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<!--
<component> + is 的骚操作 ： 动态绑定组件

组件会在 `组件名` 改变时改变
<component :is="组件名变量"></component>

只要在data里弄个变量，给变量赋值就能动态的切换组件。
-->
<body>
<div id="app">
    <!--
        v-bind:is="show"
        简写为：
        :is="show"
        实际作用为绑定值
        [vue is 方法 ：is 动态组件](https://www.jianshu.com/p/38e5433dc58f)
        [vue中is与:is的区别](https://blog.csdn.net/qq_39397845/article/details/81062475)
    -->
    <span>这是  :is="show"的案例</span>
    <component :is="show"></component>
    <br>
    <br>
    <br>
    <span>这是  v-bind:is="show"的案例</span>
    <component v-bind:is="show"></component>
    <br>
    <br>
    <br>
    <span>这是  is="show"的案例</span>
    <component is="show"></component>
</div>
<script>
    Vue.component('one', {
        template: "<div>one<div>"
    });
    Vue.component('show', {
        template: "<div>show<div>"
    });
    const vm = new Vue({
        el: '#app',
        data: {
            show: 'one'
        },
    });
</script>
</body>
</html>